<template>
	<view class="store-table">
		<view :style="`height: 44px;`">
		</view>
		<view @click="back" style="line-height: 30px;">
			< 返回</view>
				<!-- 识别二维码 -->
				<!-- <button @click="scanCode">扫描二维码</button> -->
				<!-- <view class="addbox">
					<button class="mini-btn" size="mini" type="primary" @click="trachOpen('POST')">新增</button>
				</view> -->
				<scroll-view scroll-y="true" class="scroll-Y margin-bottom-xl">
					<view class="row title">
						<view class="tablebox" v-for="(item, index) in titleList" :key="index" :style="`flex: ${item.span};text-align:${index==0?'left':'center'}`">
							{{ item.linename }}
						</view>
					</view>
					<view class="row" v-for="item in dataList" :key="item.id">
						<view :style="`flex: 8`">
							{{ item.linename }}
						</view>
						<view class="linecaozuo" @click="trachOpen('PUT', item)">
							<image style="width: 20rpx;height: 20rpx;" src="@/static/img/edit.png">
							</image>
							<view class="btn">修改</view>
						</view>
						<view class="linecaozuo" @click="trachOpen('DELETE', item)">
							<image style="width: 20rpx;height: 20rpx" src="@/static/img/delete.png">
							</image>
							<view class="btn">删除</view>
						</view>
					</view>
				</scroll-view>
				<view v-if="show" class="model">
					<view class="model-content">
						<view class="model-title">
							<view class="headtitle">编辑线路名称</view>
							<view style="font-size: 40rpx;" @click="close">×</view>
						</view>
						<view class="model-search">
							<view style="margin-right: 20rpx;">当前线路：</view>
							<input type="text" style="flex:1;border-bottom: 1rpx solid #666;" v-model="lineForm.linename"
								placeholder="请输入" />
							<button style="margin-left:20rpx;" type="primary" size="mini" @click="submitLine()">确定</button>
						</view>
					</view>
				</view>
				<view class="bottomtext" v-if="status">到底了</view>
				<view class="malfunction-btn" @click="trachOpen('POST')">
					<image class="addicon" src="@/static/img/addicon.png"></image>
				</view>
				<!-- <u-modal :show="modalShow" :content="content" :showCancelButton="true" @cancel="modalShow=false;"
			@confirm="onDeleteConfirm"></u-modal> -->
		</view>
</template>

<script>
	var util = require("../../common/util");
	var api = require("../../common/api");
	export default {
		data() {
			return {
				// 二次确认删除
				modalShow: false,
				content: '确认要删除该线路吗？',
				linename: "",
				lineForm: {},
				typemethod: "",
				form: {
					page: 1,
					limit: 20,
				},
				// 分页
				total: "",
				status: true,
				show: false,
				showMap: false,
				date: new Date().Format('yyyy-MM-dd'),
				deviceForm: {},
				polyline: [],
				latitude: 30.190862540958,
				longitude: 120.167049685097,
				covers: [],
				points: [],
				titleList: [{
						linename: '设备名称',
						span: '8'
					},
					{
						linename: '操作',
						span: '4'
					},
				],
				dataList: [],
				contentStyle: 'ont-size: 26rpx;color: #909091;margin-bottom: 6px;',
			}
		},

		// 上拉加载更多
		onReachBottom() {
			console.log(this.form.page < this.total, this.form.page, this.total)
			if (this.form.page < this.total) {
				this.form.page = Number(this.form.page) + 1
				this.getEquipList()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.repeat()
		},
		mounted() {
			this.getEquipList()
		},
		methods: {
		// 	// 扫二维码
			
		// 	scanCode() {
    //   uni.scanCode({
    //     success: (res) => {
    //       this.result = res.result
    //       this.imageUrl = res.path
		// 			console.log(1111,res)
		// 			uni.showToast({
		// 			  title: `扫描成功${res.result}`,
		// 			  icon: 'none'
		// 			})
    //     },
    //     fail: (res) => {
    //       uni.showToast({
    //         title: '扫描失败',
    //         icon: 'none'
    //       })
    //     }
    //   })
    // },
		
			// 重置刷新
			repeat() {
				this.form.page = 1
				this.form.limit = 20
				this.dataList = []
				this.getEquipList()
			},
			// 查询列表
			getEquipList() {
				util.myrequest(
					api.apis.gpscoordinatelinepage, this.form,
					"GET"
				).then(res => {
					if (res.code == 0) {
						this.dataList = this.dataList.concat(res.page.list)
						this.total = res.page.totalPage
						if (this.form.page == res.page.totalPage) {
							this.status = true

						} else {

							this.status = false
						}
						uni.stopPullDownRefresh();
					}
				})
			},
			trachOpen(type, item) {
				this.typemethod = type
				if (item) {
					this.lineForm = JSON.parse(JSON.stringify(item))
				}

				if (type == 'POST') {
					this.lineForm.linename = ''
					this.lineForm.id = ''
					this.show = true
				} else if (type == 'DELETE') {
					// this.modalShow=true
					uni.showModal({
						title: '提示',
						content: this.content,
						success: (res) => {
							if (res.confirm) {
								// console.log('用户点击确定');
								this.onDeleteConfirm()
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				} else {
					this.show = true
				}

			},
			// 确认删除
			onDeleteConfirm() {

				this.submitLine()
				this.modalShow = false
			},
			submitLine(type) {
				let param = {
					linename: this.lineForm.linename,
					id: this.lineForm.id,
				}
				if (this.typemethod == 'DELETE') {
					util.myrequest(
						api.apis.gpscoordinatelineSubmit + '/' + this.lineForm.id, param, this.typemethod
					).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: "删除成功",
								icon: "none"
							})
							this.repeat()
							this.show = false
						}
					})
				} else {
					if (this.lineForm.linename == '') {
						uni.showToast({
							title: "请填写线路",
							icon: "none"
						})
						return
					}
					util.myrequest(
						api.apis.gpscoordinatelineSubmit, param, this.typemethod
					).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: "提交成功",
								icon: "none"
							})
							this.repeat()
							this.show = false
						}
					})
				}
			},
			onChange(val) {
				// this.$refs.myMap.style.hight = '20px'
				this.date = val
			},
			back() {
				uni.navigateBack()
			},
			close() {
				this.show = false
				this.showMap = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.store-table {
		background-color: #fff;
		padding: 30rpx 30rpx 0;
		color: #666;

		.title {
			background: #f4f2f2;
			border-radius: 5rpx;
			padding: 10px;
			margin-bottom: 6px;
		}

		.row {
			display: flex;
			padding: 20rpx;
			border-bottom: 1px solid #f1f1f1;
		}
	}

	.btn {
		color: #357efe;
		font-size: 26rpx;
	}

	.model-title {
		display: flex;
		justify-content: space-between;
	}

	.model-search {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	::v-deep .uni-popup__wrapper-box {
		width: 100%;
		height: 400px;
		background-color: #fff;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.date {
		display: flex;
		align-items: center;
		flex: 1;
	}

	::v-deep .uni-icons {
		display: none;
	}

	.model {
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.2);
		height: 100%;
		width: 100%;
		padding-top: 50%;
	}

	.model-content {
		width: 100%;
		// height: 380px;
		background-color: #fff;
		padding: 20rpx 30rpx;
		position: relative;
	}

	// 新增按钮
	.addbox {
		text-align: right;
		margin-bottom: 10rpx;
	}

	// 表头
	.tablebox {
		// text-align: center;
	}

	// 操作
	.linecaozuo {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	// 弹框标题
	.headtitle {
		font-weight: 700;
	}

	// 到底了
	.bottomtext {
		text-align: center;
		color: #999;
		padding-bottom: 20rpx;
	}
	// 新增的按钮
	.malfunction-btn {
		position: fixed;
		bottom: 280rpx;
		right: 30rpx;

	}
	.addicon{
		width: 128rpx;
		height: 128rpx;
	}
</style>